<!--业务使用科室下拉树-->
<template>
    <div>
        <TreeSelect v-model="value"
                    :beforeClearAll="deptSelect"
                    :default-expand-level="4"
                    :normalizer="normalizer"
                    :options="deptOptions"
                    :show-count="true"
                    placeholder="请选择归属科室" @select="deptSelect"
        />
    </div>
</template>

<script>
import TreeSelect from "@riophae/vue-treeselect";
import {listDept} from "@/api/system/dept";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "baseDeptTree",
    components: {TreeSelect},
    data() {
        return {
            // 科室树选项
            deptOptions: [],
            // value:''
        }
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        orgId: {
            type: String,
            default: ''
        },
        // 科室属性
        deptAttributeStr: {
            type: String,
            default: ""
        },
    },
    mounted() {
        this.getDeptTree()
    },
    watch: {
        'orgId': function (val) {
            this.getDeptTree()
        },
    },
    methods: {
        /** 转换科室数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.deptId,
                label: node.deptName,
                children: node.children
            };
        },

        getDeptTree() {
            let _this = this
            listDept({
                'delFlag': '0',
                'status': '0',
                'orgId': this.orgId,
                'deptAttributeArray': this.deptAttributeStr
            }).then(response => {
                // if (_this.value) {
                // let index = Array.from(response.data).findIndex(item => {
                //     return item.deptId = _this.value
                // })
                // if (index === -1) {
                //     this.form.deptId = undefined
                // }
                // }
                this.deptOptions = this.handleTree(response.data, "deptId");
                this.deptOptions.unshift({"deptId": '', "deptName": "请选择"})
            });
        },

        deptSelect(node) {
            this.$emit("deptSelect", node)
        }
    }
}
</script>

<style scoped>
::v-deep .vue-treeselect__control {
    margin-bottom: -2px !important;
}

::v-deep .vue-treeselect__single-value {
    top: -2px
}
</style>
